面试写代码（尤其是前端 Live Coding）遇到考察可访问性（Accessibility，简称 A11y）时，面试官往往不是指望你背下所有的 ARIA 属性，而是看你有没有这个意识以及能不能在关键组件上正确运用。

要做到“速成”并给面试官留下惊艳的印象，核心秘密只有一句话：能用原生 HTML 标签，就绝对不要用 ARIA。只有在原生标签无能为力时，才用 ARIA 来补救。

以下是为你整理的 ARIA 面试速成自救指南，吃透这三招，应付面试妥妥的。

🛑 核心心法：ARIA 第一准则（First Rule of ARIA）

面试写代码时，最忌讳为了展现自己知道 ARIA，而在 button 上写 role="button"。

• ❌ 错误：<div role="button" onClick={...}>提交</div> （既要处理样式，还要处理键盘回车事件）
• ❌ 多余：<button role="button">提交</button> （画蛇添足）
• 正确：<button>提交</button> （天然自带语义和键盘焦点）

速成口诀：多用语义化标签（main, nav, header, footer, aside, dialog），少用 div 和 span。

⚡ 三大高频面试场景速成模板

如果面试官非要让你实现一个原生标签做不了的复杂组件（比如自定义下拉框、弹窗、选项卡），你只需要死记硬背下面三个场景的 ARIA 属性：

场景一：纯图标按钮（没有文字的 Button）

面试写代码时，我们经常用 Lucide React 或 FontAwesome 的图标来当按钮（比如关闭按钮 X，或者搜索图标）。屏幕阅读器是读不懂图标的！

• 必杀技：aria-label
• 代码模板：

// ❌ 错误：屏幕阅读器只会读出 "按钮"，盲人不知道这是干嘛的
<button onClick={handleClose}><XIcon /></button>
​
//  正确：明确告诉盲人这个按钮的功能
<button onClick={handleClose} aria-label="关闭弹窗">
  <XIcon />
</button>

场景二：控制显示/隐藏的组件（如：下拉菜单 Dropdown / 折叠面板 Accordion）

面试官非常喜欢让你写一个点击能展开、收起的组件。你需要用 ARIA 告诉盲人：“我现在是展开的还是收起的？” 以及 “我控制的是哪一块区域？”。

• 必杀技：aria-expanded（是否展开） 和 aria-controls（控制谁）
• 代码模板：

export default function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
​
  return (
    <div>
      {/* 触发按钮 */}
      <button
        aria-haspopup="listbox" // 告诉浏览器：我点击会弹出一个列表
        aria-expanded={isOpen}  // 动态绑定：true 或 false
        aria-controls="dropdown-menu" // 对应下方列表的 id
        onClick={() => setIsOpen(!isOpen)}
      >
        选择选项
      </button>
​
      {/* 弹出的列表 */}
      {isOpen && (
        <ul id="dropdown-menu" role="listbox">
          <li role="option">选项 1</li>
          <li role="option">选项 2</li>
        </ul>
      )}
    </div>
  );
}

场景三：异步加载 / 错误提示（动态更新的区域）

比如你刚才写的 GitHub 搜索组件，当网络请求正在加载（Loading），或者突然报错时，如何让盲人第一时间知道？因为盲人看不到屏幕上突然弹出的错误红字。

• 必杀技：aria-live（监控动态变化）
• 代码模板：

// aria-live="polite" 告诉屏幕阅读器：等用户把手头的事做完（比如打完字），再读出里面的变化
// aria-live="assertive" 则是最高优先级，立刻打断用户并读出来（通常用于紧急报错）
​
<div aria-live="polite" className="status-container">
  {isLoading && <span>正在搜索中...</span>}
  {error && <span role="alert" className="text-red-500">网络连接失败，请重试</span>}
</div>

🧠 面试时的“装杯”加分连招（口述话术）

在 Remote 面试写代码时，一边敲代码，一边把你的 A11y 意识说出来，能瞬间把面试官的期待值拉满。你可以直接背诵以下这段话：

“这里我使用了原生的 <button> 标签，而不是用 <div> 加 onClick。因为原生标签不仅自带 button 的可访问性角色（Role），而且天然支持键盘的 Tab 键聚焦，以及回车键（Enter/Space）触发。这样我们就不用再手动去写 tabIndex={0} 和键盘事件监听了，体验和性能都更好。”

如果迫不得已用了 aria-label，你可以说：

“因为这个按钮里面只有 Icon 图标，没有文本，为了对屏幕阅读器（Screen Reader）和盲人用户友好，我特意加了 aria-label 来描述这个按钮的实际功能。”

🏁 总结你的速成清单：

1. 能用 button 不用 div。
2. 图标按钮必须加 aria-label="描述"。
3. 控制显示隐藏加 aria-expanded={boolean}。
4. 动态提示（如 Loading、报错）加 aria-live="polite"。

记住这四点，面试时的可访问性考核基本就能轻松高分通过了！